<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body{
        position: absolute;
      }
      *{
        /* 文本字符不可选中 */
        user-select: none;
      }
      .mainbox {
        display: flex;
        position: relative;
        /* border: 1px solid gray; */
        width: 1150px;
        height: 700px;
        background-image: url("/headPage/img/main.jpg");
        background-size: 100% 100%;
        /* display: none; */
      }
      .orderInter{
        position:absolute;
        border: 1px solid rgba(0, 0, 0, 0.408);
        width: 200px;
        height: 466px;
        right: -175px;
        top: 197px;
        display: flex;
        justify-content: center;
        align-items: center;      
      }
      .orderInter>div{
        /* border: 1px solid green; */
        width: 98%;
        height: 60%;
      }
      .orderInter>div:nth-child(1){
        display: flex;
        justify-content: space-around;
      }
      .orderInter>div:nth-child(1)>div{
        /* border: 1px solid gray; */
        width: 23%;
        height: 40px;   
        text-align: center;
        font-family: cursive;
        font-size: 13px;   
      }
      .chooseInter{
        display: none ;
        border-top: 1px solid gray;
         width:200px;
        height: 100px;
        position: absolute;
        left: 0px;
        top: 139px;
        /* display: flex; */
      }
      h3{
        text-align: left;
      }
      .chooseInter>div{
        position: absolute;
        top: 53px;
        left: 1px;
        /* border-top: 1px solid gray; */
        width: 196px;
        height: 50px;
        display: flex;
        justify-content: space-between;
      }
      .chooseInter>div>div{
        /* border: 1px solid gray; */
        width: 43px;
        height: 48px;
      }
      .cancel{
        /* */
        
        position: absolute !important;
        top: 13px !important;
        left: 149px !important;
        width: 57px !important;
        height: 24px !important;       
      }
      .cancel>input{
        border: 1px solid rgba(0, 0, 0, 0.435); 
        border-radius: 5px;
        font-size: 8px;
        background-color: white;
        width: 58px;
        height: 26px;
        margin-left: -25px;
      }
      .cancel>input:hover{
        cursor: pointer;
        background-color: rgba(0, 128, 41, 0.87);
        color: white;
        transition: all 0.5s;
      }
      .InterContor{
        width: 30px;
        height: 30px;
      }
      
      .InterContor3{
        width: 30px;
        height: 30px;
      }
      .choose{
        display: none;
        position: absolute;
        left: 0px;
        top: 257px;
        width:200px;
    }
    .choose>h5{
      float: left;
    }
    .choose>div{
      float: left;
      margin-left: 6px;
    }

    .txt{
      text-align: left;
      font-size: 10px;
      color: gray;
    }
    .pice{
      /* border: 1px solid black; */
      width: 40px;
      height: 32px;
    }
    .RMB{
      font-size: 26px;
    }
    .submit{
      display: none ;
      border: 1px solid green;
      border-radius: 20px;
      width: 102px;
      height: 30px;
      position: absolute;
      top: 340px;
      left: 47px;
      text-align: center;
      line-height: 30px;
    }
    .submit:hover{
      cursor: pointer;
      color: white;
      transition: all 0.9s;
      background-color: rgba(0, 128, 41, 0.87);
    }
    .choose>div{
      margin-top: 15px;
      border: 1px solid gray;
      border-radius: 3px;
      width: 25px;
      height: 16px;
      color: black;
      line-height: 16px;
    }
    .choose>div:hover{
      cursor: pointer;
      transition: all 0.4s;
      transform: translateY(-4px);
    }
    h5{
      text-align: left;
      color: rgba(128, 128, 128, 0.653);
    }
      /* 可选 */
      #white{
        color: gray;
      }
      /* 已选 */
      #green{
        color: green;
      }
      /* 使用中 */
      #red{
        color: red;
      }
      /* 不可选 */
      #BlackGray{
        color: purple;
      }
      .InterSpan{
        font-size: 20px !important;
      }
      .mainbox>div{
        position: absolute;
        /* border: 1px solid green; */
        width: 240px;
        justify-content: space-evenly;
        font-size: 12px;
        color: rgba(128, 128, 128, 0.455);
      }
      i {
        font-size: 45px !important;
        color: gray;
      }
      .box-one {   
        display: flex;   
        height: 50px;
        position: absolute;
        top: 50px;
        left: 30px;
      }
      .box-one>div:hover{
        cursor: pointer;
      }
      .box-two{
        display: flex; 
        height: 50px;
        position: absolute;
        top: 140px;
        left: 30px;
      }
      .box-two>div:hover{
        cursor: pointer;
      }
      .box-three{
        display: flex; 
        height: 50px;
        position: absolute;
        top: 230px;
        left: 30px;
      }
      .box-three>div:hover{
        cursor: pointer;
      }
      .box-four{
        height: 120px;
        position: absolute;
        top: 315px;
        left: 35px;
        /* border: 1px solid purple; */
        /* width: ; */
      }
      .five>div:hover{
        cursor: pointer;
      }
      .box-five{
        height: 120px;
        position: absolute;
        top: 456px;
        left: 35px;
        /* border: 1px solid purple; */
        /* width: ; */
      }
      .five{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }
      .five>div{
        position: relative;
        /* border: 1px solid gray; */
        width: 26%;
        height: 30%;
      }
      .mainbox >div>div{
        position: relative;
        line-height: 70px;
      }

      .comID{       
        position: absolute;
        top: -15px;
        left: 11px;
      }
      .five_comID{
        position: absolute;
        top: -15px;
        left: 11px;
      }
      .onlyHome_comLeftID{
        position: absolute;
        top: -15px;
        left: 38px;
      }
      .onlyHome_comRightID{
        position: absolute;
        top: -15px;
        left: 111px;
      }
      .powerComID{
        position: absolute;
        top: -15px;
        left: 13px;
      }
      .img{
        position: absolute;
        width: 88px;
        height: 70px;
        left: -19px;
        top: -14px;
        display: none;
      }
      .img2{
        position: absolute;
        width: 81px;
        height: 63px;
        left: 7px;
        top: -11px;
        display: none
      }
      .img3{
        position: absolute;
        width: 81px;
        height: 63px;
        left: 82px;
        top: -11px;
        display: none
      }
      .img4{
        position: absolute;
        width: 88px;
        height: 70px;
        left: -20px;
        top: -14px;
        display: none
      }
      /* 单人包 */
      .onlyOneHome{
        position: absolute;
        top: 110px;
        left: 378px;
        /* border: 1px solid red; */
        height: 550px;
      }
      .onlyOneHome>div{
        display: flex;
        justify-content: space-evenly;
        width: 173px;
        height: 60px;

      }
      .onlyOneHome>div>div:hover{
        cursor: pointer;
      }
      .home_three{
        margin-top: 231px;
        margin-left: -16px;  
      }
       .home_four{
        margin-top: 15px;
        margin-left: -17px;    
      }
      .double_home{
        margin-top: 121px;
        margin-left: -20px;    
      }
      /* 高端大厅 */
     .powerInter{
      left: 563px;
      top: 309px;
      /* border: 1px solid gray; */
      width: 363px !important;
      height: 196px;
     }
     .powerInter>div{
       display: flex;
       justify-content: space-around;
       margin-top: 13px;
       width: 100%;
       /* border: 1px solid green; */
       height: 25%;
     }
     .powerInter>div>div{
       position: relative;
       width: 15%;
       /* border: 1px solid green; */
       height: 100%;
     }
     .powerInter>div>div:hover{
       cursor: pointer;
     }
     .double_home2{
       display: flex;
       justify-content: space-between;
      /* border: 1px solid gray; */
      width: 172px !important;
      height: 60px;
      left: 570px;
      bottom: 43px;
     }
     .double_home2>div:hover{
       cursor: pointer;
     }
     .double_home3{
       display: flex;
       justify-content: space-between;
      /* border: 1px solid gray; */
      width: 172px !important;
      height: 60px;
      left: 782px;
      bottom: 43px;
     }
     .double_home3>div:hover{
       cursor: pointer;
     }
     .normol{
    /* border: 1px solid gray; */
      width: 550px !important;
      height: 189px;
      left: 363px;
      top: 40px;
     }
     .normol>div{
      /* border: 1px solid purple; */
      width: 100%;
      height: 36%;
      margin-top: 24px;
      display: flex;
      justify-content: space-around;
     }
     .normol>div>div{
       position: relative;
       /* border: 1px solid gray; */
       width: 8%;
       height: 58%;
     }
     .normol>div>div>div:hover{
       cursor: pointer;
     }
  
    </style>
  </head>
  <link rel="stylesheet" href="/lib/css/font-awesome-4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/lib/css/font-awesome-4.7.0/css/font-awesome.css" />
  <script src="/lib/js/jQuery.js"></script>
  <body>
    <div class="mainbox">
      <!-- <i class="fa fa-tv" aria-hidden="true" /></i>  -->
      <!-- 第一个盒子 -->
      <div class="box-one">
        <div>
          <img class="img" src="/headPage/img/check.png" alt="">
          <i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">001</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">002</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">003</span></div>
      </div>
      <!-- 第二个盒子 -->
      <div class="box-two">
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">004</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">005</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">006</span></div>
      </div>
      <!-- 第三个盒子 -->
      <div class="box-three">
 <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">060</span></div>
          </div>        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">008</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">009</span></div>
      </div>
      <!-- 第四个盒子 -->
      <div class="box-four">
        <div class="five">
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">010</span></div>
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">011</span></div>
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">012</span></div>
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">013</span></div>
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">014</span></div>
        </div>
      </div>
        <!-- 第五个盒子 -->
        <div class="box-five">
          <div class="five">
            <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">015</span></div>
            <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">016</span></div>
            <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">017</span></div>
            <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">018</span></div>
            <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">019</span></div>
          </div>
        </div>
        
        <div class="onlyOneHome">
           <!-- 单人包间3 -->
           <div class="home_three">
            <div>
              <div><img class="img2" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comLeftID">022</span></div>
            </div>
           <div>
              <div><img class="img3" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comRightID">023</span></div>
          </div>
          </div>
          <!-- 单人包间3 -->
          <div class="home_four">
            <div>
              <div><img class="img2" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comLeftID">024</span></div>
            </div>
           <div>
              <div><img class="img3" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comRightID">025</span></div>
          </div>
          </div>
          <!-- 双人包 -->
          <div class="double_home">
            <div>
              <div><img class="img2" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comLeftID">026</span></div>
            </div>
           <div>
              <div><img class="img3" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comRightID">027</span></div>
          </div>
          </div>
        </div>
        <!-- 高端大厅 -->
        <div class="powerInter">
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">028</span></div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">029</span></div>

            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">030</span></div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">031</span></div>

          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">033</span></div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">034</span></div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">035</span></div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">036</span></div>

          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">038</span></div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">039</span></div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">040</span></div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">041</span></div>
          </div>
        </div>
        <!--双人包2  -->
        <div class="double_home2">
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">043</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">044</span></div>
        </div>
         <!--双人包3  -->
         <div class="double_home3">
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">045</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">046</span></div>
        </div>
        <!-- 普通 -->
        <div class="normol">
            <!--  -->
          <div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">020</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">021</span></div>
          </div>
          <div>
           <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">047</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">048</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">049</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">050</span></div>
          </div>
          <div>
             <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">051</span></div>
          </div>
          <div>
             <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">052</span></div>
          </div>
        </div>
        <!--  -->
          <div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">053</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">054</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">055</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">056</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">057</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">058</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">060</span></div>
          </div>
          <div>
            <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">060</span></div>
          </div>
        </div>
        </div>
    </div>
    <div class="orderInter">
      <div>
        <div>
          <span class="fa fa-tv InterSpan" id="gray" aria-hidden="true"></span>
       <br>
          可选
        </div>
        <div>
          <span class="fa fa-tv InterSpan" id="green" aria-hidden="true"></span>
       <br>
          已选
        </div>
        <div>
          <span class="fa fa-tv InterSpan" id="red" aria-hidden="true"></span>
       <br>
          使用中
        </div>
        <div>
          <span class="fa fa-tv InterSpan" id="BlackGray" aria-hidden="true"></span>
       <br>
          不可选
          <div class="chooseInter">
            <h3 class="InterNo">001号机</h3>
            <div class="cancel">
              <input type="submit" value="取消预订">
            </div>
           <div>
             <div><img class="InterContor" src="/headPage/img/cpu.png" alt="">
          
            <span class="txt">  i5-12400F</span>
            </div>
            
             <div><img class="InterContor" src="/headPage/img/ram3.png" alt="">
           
           <span class="txt"> 32G</span></div>
             <div><img class="InterContor" src="/headPage/img/gpu.png" alt="">
            
             <span class="txt">RTX 3060</span>
            </div>
             <div>
               <div class="pice">
                 <span>&#xA5;<span class="RMB">9</span></span>
               </div>
               <span class="txt">会员价</span>
             </div>
           </div>
          </div>
          <div class="choose">
            <h5>已选：</h5>
            <!-- <div>001</div>
            <div>002</div>
            <div>003</div>
            <div>004</div>
            <div>005</div> -->
          </div>
          <div class="submit">确认选座</div>
        </div>
    </div>
    <!-- 原生js -->
    <script>    
      var arry=document.querySelectorAll('.box-one>div')
      var arry2=document.querySelectorAll('.box-two>div')
      var arry3=document.querySelectorAll('.box-three>div')
      var arry4=document.querySelectorAll('.five>div')
      var arry5=document.querySelectorAll('.home_one>div>div')
      var arry6=document.querySelectorAll('.home_two>div>div')
      var arry7=document.querySelectorAll('.home_three>div>div')
      var arry8=document.querySelectorAll('.home_four>div>div')
      var arry9=document.querySelectorAll('.double_home>div>div')
      var arry10=document.querySelectorAll('.powerInter>div>div')
      var arry11=document.querySelectorAll('.double_home2>div')
      var arry12=document.querySelectorAll('.double_home3>div')
      var arry13=document.querySelectorAll('.normol>div>div>div')
      clickColor(arry)
       clickColor(arry2)
       clickColor(arry3)
       clickColor(arry4)      
       clickColor(arry5)
       clickColor(arry6)
       clickColor(arry7)
       clickColor(arry8)
       clickColor(arry9)
       clickColor(arry10)
       clickColor(arry11)
       clickColor(arry12)
       clickColor(arry13)
     //最大预订5个位置
      var onclickCount=5;
      //预约满员标识
      var flag=false;
      //点击节点数组
      var array=[];
      //保存前5个预订位置元素节点
      var arrayEleList=[]
      $(function(){
        
        $('.cancel').click(function(){
          var interNo=$('h3').text().substring(0,3)
          //匹配指定位置的电脑
          arrayEleList.forEach(ele=>{
            if(ele[2].innerText==interNo){                        
              ele[0].style.display='none'
              ele[1].style.color='gray'
              ele[2].style.color='rgba(128, 128, 128, 0.455)' 
              var arrayCos=$('.choose>div')     
             for (let i = 0; i < arrayCos.length; i++) {
            if(arrayCos[i].innerText==interNo){
              arrayCos[i].remove()
              arrayEleList.splice(i,1)
               //设置上一个机子信息
               if(i!=0){
                $('h3').text(arrayCos[i-1].innerText+'号机')
                //改变该机子的背景颜色---（当前索引位-1
                $('.choose>div').eq(i-1).css({
                  'background-color':'rgba(0, 128, 41, 0.87)',
                  'color':'white'
                })            
               }
               if(arrayEleList.length==0){
                document.querySelector('.submit').style.display='none'  
                  document.querySelector('.choose').style.display='none'  
                  document.querySelector('.chooseInter').style.display='none'
               }
              break           
            }
          }
          if(onclickCount==5){
            onclickCount=5
          }
          else {
                 onclickCount++
          }       
            }
          })         
        })
      })  
      function clickColor(arry){
        arry.forEach(element => {
        element.addEventListener('click',function(){          
        document.querySelector('.submit').style.display='inline-block'                 
        document.querySelector('.choose ').style.display='inline-block'    
        document.querySelector(' .chooseInter ').style.display='inline-block'    
          var isColor=this.children[1].getAttribute('style')
          if(isColor==null||isColor=='color: gray;'){ 
            onclickCount-- 
            if(flag){
             array.forEach(element => {
               element[0].style.display='none'
             });
              //清除上一次点击的节点
              array=[]
            }           
            this.children[0].style.display='block'
            //未满员时继续预订
            if(onclickCount>=0){      
            this.children[1].style.color='green'
            this.children[2].style.color='black'
            arrayEleList.push(this.children)   
             //隐藏->取消预约按钮
             document.querySelector('.cancel').style.display='block'
            }else{
               //预订满员时，保存此次点击的元素节点
                array.push(this.children)
                flag=true
                onclickCount=0
                //隐藏->取消预约按钮
                document.querySelector('.cancel').style.display='none'
            }                            
            // Jquery开始  
          $(function(){
            // 机号
            var NO=$(element).children(2).text()
            var InterNo=$('.InterNo')
            InterNo.text(NO+'号机')        
            var ChooseInterNo=$('.choose')
            if(ChooseInterNo.children().length<=5){
              //清除之前选中的背景颜色
              $('.choose>div').css({
                'background-color':'white',
                  'color':'black'
              })
              var ele=$('<div style="background-color:rgba(0, 128, 41, 0.87);color:white">'+NO+'</div>')
              ChooseInterNo.append(ele)               
            } else{
               //清除之前选中的背景颜色
               $('.choose>div').css({
                'background-color':'white',
                  'color':'black'
              })
            }
            //鼠标点击已选位置----动态绑定事件
          $('.choose').on('click',"div",function(){     
                InterNo.text($(this).text()+'号机')
                // 其他节点不改变颜色
                $('.choose>div').eq($(this).index()-1).siblings().css({
                'background-color':'white',
                 'color':'black'
              })
                //指定节点改变颜色
               $(this).css({
                  'background-color':'rgba(0, 128, 41, 0.87)',
                  'color':'white'
                });     
                 //显示->取消预约按钮
                 document.querySelector('.cancel').style.display='block'  
              })
         })
          // Jquery结尾 
          }else{           
            flag=false;
            //始终认为数组第一个元素是上一次点击的节点        
             if(onclickCount==0&array.length>0){
              array[0][0].style.display='none'
            }
            onclickCount++     
            this.children[0].style.display='none'
            this.children[1].style.color='gray'
            this.children[2].style.color='rgba(128, 128, 128, 0.455)'
               // Jquery开始
            //索引开始位置
            var index=0;
            arrayEleList.forEach(e => {   
              var text=e[2].innerText
              if(text==this.children[2].innerText){              
                var arrayCos=document.querySelectorAll('.choose>div')
                //如果没有预订位置，则隐藏侧边栏信息
                if(arrayCos.length==1){           
                   /*
                     初始隐藏标签
                    .submit
                    .choose  
                    .chooseInter
                    */   
                  document.querySelector('.submit').style.display='none'  
                  document.querySelector('.choose').style.display='none'  
                  document.querySelector('.chooseInter').style.display='none'
                }
                arrayCos.forEach(n => {
                  if(n.innerHTML==text){
                    n.remove()
                    arrayEleList.splice(index,1)
                    return;
                  }
                });
              }
              index++;       
            });
          }   
    
        })
      });           
    }
    </script>
  </body>
</html>
